/*! _editors.scss | Vuero | Css Ninja 2020-2021 */

/*
    1. Summernote Editor    
    2. Summernote Dark mode
    3. Sun Editor Dark mode
*/

/* ==========================================================================
1. Summernote Editor
========================================================================== */

.note-modal {
  .note-modal-content {
    .note-modal-header {
      h4 {
        font-family: var(--font);
        font-size: 1.2rem !important;
        font-weight: 500;
        color: var(--dark-text);
      }

      .close {
        outline: none !important;
      }
    }

    .note-modal-body {
      padding: 30px;

      .form-group {
        label {
          font-family: var(--font);
          font-size: 1rem;
          font-weight: 400;
          color: var(--light-text);
        }
      }
    }

    .note-modal-footer {
      padding: 0 16px;
      height: 70px;
      background: var(--widget-grey-dark-2);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn-primary {
        height: 40px;
        background: var(--primary);
        padding-bottom: 8px;
        opacity: 1;
        min-width: 130px;
        border-radius: var(--radius-large);
      }
    }
  }
}

/* ==========================================================================
2. Summernote Dark mode
========================================================================== */

.is-dark {
  .note-editor {
    .note-toolbar {
      background: var(--dark-sidebar-light-2);
      border-color: var(--dark-sidebar-light-12);

      .note-btn-group {
        .note-btn {
          background: var(--dark-sidebar-light-4);
          border-color: var(--dark-sidebar-light-12);

          i,
          .note-icon-caret {
            color: var(--dark-dark-text);
          }
        }

        .note-dropdown-menu {
          background: var(--dark-sidebar-dark-2);
          border-color: var(--dark-sidebar-light-8);

          .note-dropdown-item {
            color: var(--light-text);

            &:hover {
              background: var(--dark-sidebar-light-1);
            }
          }

          .note-dimension-display {
            color: var(--dark-dark-text);
          }
        }
      }
    }

    .note-editable {
      .table {
        tbody {
          td {
            border-color: var(--dark-sidebar-light-12) !important;
          }
        }
      }
    }

    .note-popover {
      background: var(--dark-sidebar-light-2);
      border-color: var(--dark-sidebar-light-12);

      &.bottom {
        .note-popover-arrow::after {
          border-bottom-color: var(--dark-sidebar-light-2);
        }
      }

      .note-btn-group {
        .note-btn {
          background: var(--dark-sidebar-light-4);
          border-color: var(--dark-sidebar-light-12);

          i,
          .note-icon-caret {
            color: var(--dark-dark-text);
          }
        }
      }
    }
  }
}

.note-modal {
  .note-modal-content {
    border: none;

    .note-modal-header {
      background: var(--dark-sidebar-light-2);
      border-color: var(--dark-sidebar-light-12);

      h4 {
        color: var(--dark-dark-text);
      }

      .close {
        color: var(--dark-dark-text) !important;

        .note-icon-close {
          color: var(--dark-dark-text) !important;
        }
      }
    }

    .note-modal-body {
      background: var(--dark-sidebar-light-4);

      .form-group {
        input {
          background: var(--dark-sidebar-dark-2);
          border-color: var(--dark-sidebar-light-8);
          color: var(--light-text);
          height: 38px;
          border-radius: var(--radius);
        }
      }
    }

    .note-modal-footer {
      background: var(--dark-sidebar-light-2);
      border-color: var(--dark-sidebar-light-12);

      .btn-primary {
        background: var(--primary);
        border-color: var(--primary);
      }
    }
  }
}

/* ==========================================================================
3. Sun Editor Dark mode
========================================================================== */

.is-dark {
  .sun-editor {
    width: 100%;
    border-color: var(--dark-sidebar-light-12) !important;
    background: var(--dark-sidebar-dark-2);

    .se-container {
      .se-toolbar {
        background: var(--dark-sidebar-dark-2);
        border-color: var(--dark-sidebar-light-12);
        outline: none;

        &.se-toolbar-balloon {
          box-shadow: var(--light-box-shadow) !important;

          .se-arrow.se-arrow-down::after {
            border-top-color: var(--dark-sidebar-dark-2);
          }
        }

        .se-btn-tray {
          .se-btn-module {
            background: var(--dark-sidebar-light-4);
            border-color: var(--dark-sidebar-light-12);

            .se-menu-list {
              li {
                button {
                  color: var(--dark-dark-text);

                  &:hover {
                    background: var(--dark-sidebar-light-2);
                    border-color: var(--dark-sidebar-light-12);
                  }
                }
              }
            }
          }
        }
      }

      .se-wrapper {
        background: var(--dark-sidebar-dark-10);

        .se-wrapper-inner {
          background: var(--dark-sidebar-dark-10);
          color: var(--dark-dark-text);
        }
      }

      .se-resizing-bar {
        background: var(--dark-sidebar-dark-2);
        border-color: var(--dark-sidebar-light-12);
      }
    }
  }
}
